<template>
  <view class="user">
    <view class="center">
      <view class="pane" @click="bindLogin(true)" :hover-class="!hasLogin ? 'logo-hover' : ''">
        <image class="logo-img" :src="avatarUrl"></image>
        <view class="logo-title">
          <text class="uer-name">Hi，{{ hasLogin ? user.username || '' : '您未登录' }}</text>
            <!-- <text class="go-login navigat-arrow" v-if="!hasLogin">&#xe65e;</text> -->
        </view>
      </view>
      <view class="center-list">
        <!-- <view class="center-list-item border-bottom" @tap="goPath('/pages/user/settings')"> -->
        <view class="center-list-item border-bottom" @tap="forbidden" v-if="isShowContent"> 
          <!-- <m-icon class="prefix" color="#666666" type="contact"></m-icon> -->
          <view class="prefix info">
            <img src="../../static/img/my-info.svg" alt="" />
          </view>
          <text class="list-text">基本信息</text>
          <m-icon color="#666666" type="arrowright"></m-icon>
        </view>
        <!-- <view class="center-list-item border-bottom" @tap="goPath('/pages/user/health')"> -->
        <view class="center-list-item border-bottom" @tap="forbidden" v-if="isShowContent">
          <!-- <m-icon class="prefix" color="#666666" type="contact"></m-icon> -->
          <view class="prefix health">
            <img src="../../static/img/my-health.svg" alt="" />
          </view>
          <text class="list-text">健康监测</text>
          <m-icon color="#666666" type="arrowright"></m-icon>
        </view>
        <!-- <view class="center-list-item border-bottom" @tap="goPath('/pages/user/result')"> -->
        <view class="center-list-item border-bottom" @tap="forbidden" v-if="isShowContent">
          <!-- <m-icon class="prefix" color="#666666" type="contact"></m-icon> -->
          <view class="prefix result">
            <img src="../../static/img/my-result.svg" alt="" />
          </view>
          <text class="list-text">核酸检测结果</text>
          <m-icon color="#666666" type="arrowright"></m-icon>
        </view>
        <!-- <view class="center-list-item border-bottom" @tap="goPath('/pages/family/list')"> -->
        <view class="center-list-item border-bottom" @tap="forbidden" v-if="isShowContent">
          <!-- <m-icon class="prefix" color="#666666" type="contact"></m-icon> -->
          <view class="prefix result">
            <img src="../../static/img/avator.svg" alt="" />
          </view>
          <text class="list-text">添加家人</text>
          <m-icon color="#666666" type="arrowright"></m-icon>
        </view>
        <view class="center-list-item border-bottom" @tap="goPath('/pages/user/family/list')">
          <!-- <m-icon class="prefix" color="#666666" type="contact"></m-icon> -->
          <view class="prefix result">
            <img src="../../static/img/family.png" alt="" />
          </view>
          <text class="list-text">人员信息列表</text>
          <m-icon color="#666666" type="arrowright"></m-icon>
        </view>
      </view>
      <view class="btn-row" v-if="hasLogin">
        <button class="primary" type="primary" :loading="logoutBtnLoading" @tap="bindLogout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex';
  import LoginApi from '@/api/login';
  import Api from '@/api/main'
  import mIcon from '@/components/m-icon/m-icon.vue';
  import { wxReLogin } from '@/common/utils'

  export default {
    components: {
      mIcon
    },
    data() {
      return {
        avatarUrl: '../../static/img/logo.png',
        inviteUrl: '',
        logoutBtnLoading: false,
        hasPwd: uni.getStorageSync('uni_id_has_pwd'),
        loginType: 'wx'
      };
    },
    computed: {
      ...mapState(['forcedLogin', 'hasLogin', 'user']),
      isShowContent() {
        return  this.loginType !== 'wx'
      }
    },
    onShow() {
      this.getCondition()
    },
    mounted() {
      console.log('hasLogin', this.hasLogin);
    },
    methods: {
      ...mapMutations(['logout']),
      forbidden() {
        uni.showToast({
          title: '功能暂未开启',
          icon: 'none'
        })
      },
      // 获取证件类型
      async getCondition() {
        const res = await this.$http.post(Api.getCondition, {}, { showToast: false });
        console.log('getCondition', res);
        if (res) {
          if (res.loginType) {
            this.loginType = res.loginType || 'phone'
          }
        }
      },
      // 判断登陆
      async bindLogin(showToast) {
        console.log('bindLogin', this.hasLogin);
        return new Promise(async (resolve, reject) => {
          if (!this.hasLogin) {
            if (this.loginType === 'phone') {
              uni.navigateTo({
                url: '/pages/login/index'
              });
              resolve(false)
            }
            if (this.loginType === 'wx') { 
              await wxReLogin(showToast)
              return resolve(true)
            }
          }
          return resolve(true)
        })
      },
      // 登出
      async bindLogout() {
        if (this.logoutBtnLoading) {
          return;
        }

        this.logoutBtnLoading = true;
        const res = await this.$http.post(LoginApi.logout);
        this.logoutBtnLoading = false;

        console.log('res', res);
        if (res) {
          this.logout();
          if (this.loginType === 'wx') {
            return
          }
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/login/index'
            });
          }, 0);
        }
      },
      async goPath(path) {
        const isLogin = await this.bindLogin()

        console.log('goPath', isLogin);
        if (!isLogin) {
          return
        }
        uni.navigateTo({
          url: path
        });
      }
    }
  };
</script>

<style lang="scss">
  page,
  view {
    display: flex;
  }

  page {
    background-color: #f8f8f8;
  }

  button {
    width: 100%;
  }

  .user {
    width: 100%;
    padding: 0 40rpx;
    background-color: #ffffff;

    .center {
      width: 100%;
      flex-direction: column;
    }

    .pane {
      width: 100%;
      height: 240rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: $uni-color-primary;
      flex-direction: row;
      align-items: center;
      border-radius: 16rpx;
      box-shadow: 0px 5rpx 30rpx rgb(41 132 248 / 30%);
    }

    .logo-hover {
      opacity: 0.8;
    }

    .logo-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 150rpx;
    }

    .logo-title {
      height: 150rpx;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      margin-left: 20rpx;
    }

    .uer-name {
      height: 60rpx;
      line-height: 60rpx;
      color: #ffffff;
    }

    .go-login.navigat-arrow {
      color: #ffffff;
    }

    .login-title {
      height: 150rpx;
      align-items: self-start;
      justify-content: center;
      flex-direction: column;
      margin-left: 20rpx;
    }

    .center-list {
      background-color: #ffffff;
      margin-top: 40rpx;
      width: 100%;
      flex-direction: column;
    }

    .center-list-item {
      height: 100rpx;
      width: 100%;
      line-height: 2;
      box-sizing: border-box;
      flex-direction: row;
      padding: 0rpx 20rpx;
      display: flex;
      align-items: center;

      .prefix {
        // font-size: 38rpx;
        margin-right: 20rpx;
        width: 52rpx;
        height: 52rpx;

        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;

        &.info {
          background-color: rgba(253, 219, 120, 0.2);
        }

        &.health {
          background-color: rgba(108, 118, 244, 0.0980392156862745);
        }

        &.result {
          background-color: rgba(41, 132, 248, 0.0980392156862745);
        }

        img {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .border-bottom {
      border-bottom-width: 1rpx;
      border-color: rgba($color: #000000, $alpha: 0.1);
      border-bottom-style: solid;
    }

    .list-icon {
      width: 40rpx;
      height: 90rpx;
      line-height: 90rpx;
      color: #0faeff;
      text-align: center;
      font-family: texticons;
      margin-right: 20rpx;
    }

    .list-text {
      display: flex;
      align-items: center;
      color: #555;
      flex: 1;
      text-align: left;
    }

    .navigat-arrow {
      height: 90rpx;
      width: 40rpx;
      line-height: 90rpx;
      color: #555;
      text-align: right;
      font-family: texticons;
    }
  }
</style>